<template>
  <transition name="bounce" mode="out-in">
    <div class="">
      <div class="active-list">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media"
              v-for="item in activityList"
              @tap="viewInterDetail(item.type, item.id)"
          >
            <span class="type-label green" v-if="item.type == 0">旅游</span>
            <span class="type-label pink" v-if="item.type == 1">聚餐</span>
            <span class="type-label blue" v-if="item.type == 2">狼游</span>
            <span class="type-label yellow" v-if="item.type == 3">品茶</span>
            <a href="javascript:">
              <div class="mui-media-object">
                <span class="online-dot" v-show="item.online == 0"></span>
                <img :src="item.portrait">
              </div>
              <div class="mui-media-body">
                <div class="matcher">
                  <span class="match-name">{{item.user_nicename}}</span>
                  <span class="match-level" v-if="item.hong_level==1">入门红娘</span>
                  <span class="match-level" v-if="item.hong_level==2">铜牌红娘</span>
                  <span class="match-level" v-if="item.hong_level==3">银牌红娘</span>
                  <span class="match-level" v-if="item.hong_level==4">金牌红娘</span>
                </div>
                <p class='mui-ellipsis activity-add'>
                  <img src="../../assets/images/ico/ic_in_map.png" alt="地址:">
                  <span v-text="item.activity_address">-活动地址-</span>
                </p>
                <p class='mui-ellipsis activity-time'>
                  <img src="../../assets/images/ico/ic_in_time.png" alt="时间:">
                  <span v-text="item.start_time">-活动时间-</span>
                </p>
                <p class='mui-ellipsis activity-spend'>
                  <img src="../../assets/images/ico/ic_in_spend.png" alt="花费:">
                  <span class="mh-color" v-text="`￥${item.funds || 0}`">-活动花费-</span>
                </p>
                <p class="pep">
                  <span>已报名: {{item.limit_boy || 0}}男+{{item.limit_girl || 0}}女</span>
                  <span class="mui-pull-right">空余名额: {{item.surplus_boy || 0}}男+{{item.surplus_girl || 0}}女</span>
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "interact-all",
    data () {
      return {
        activityList: [
          // {
          //   id: '1',
          //   matchName: '月老丘比特',
          //   matchLevel: '0',
          //   matchAvatar: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=551361435,722555681&fm=15&gp=0.jpg',
          //   activeType: 1,
          //   add: '郑州市金水区九龙国际广场',
          //   time: '2018/08/09 19:00',
          //   spend: 20,
          //   hasMan: 4,
          //   hasWomen: 6,
          //   needMan: 4,
          //   needWomen: 6,
          //   online: 0
          // }
        ]
      }
    },
    methods: {
      getData(timeType, type, hongLevel, hongType, person, signUp, establish){
        let self = this;
        MH_API.getHongniang({
          page: 1,
          limit: 10,
          time_type: timeType || 1,
          type: type || '',
          hong_level: hongLevel || '',
          hong_type: hongType || '',
          person: person || 0,
          establish: establish || '',
          sign_up: signUp || ''
        }).then(res => {
          if (res.status === 200) {
            self.activityList = res.data;
          }
        })
      },
      viewInterDetail (type, id) {
        var type = parseInt(type)+1;
        this.$router.push({
          path: `/interact/travel/${id}`,
          params: {
            id: id,
            type: type
          }
        });
      }
    },
    created(){
      this.getData(1, '', '', 0);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .active-list {
    .mui-table-view {background: #f2f2f2;}
    .mui-media-body {
      flex: 1;
      padding-left: 1.5rem;
      p {font-size: 1.2rem}
    }
  }
  .mui-table-view-cell>a:not(.mui-btn) {display: flex;align-items: center;}
  li.mui-table-view-cell {
    margin: 1rem 0;
    background: #fff;
  }
  .mui-table-view .mui-media-object {
    position: relative;
    width: 7rem;
    max-width: 7rem;
    height: 7rem;
    border-radius: 100%;
    img {
      width: 7rem;
      max-width: 7rem;
      height: 7rem;
      border-radius: 100%;
    }
  }
  .matcher {
    height: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: .8rem;
  }
  .match-name {
    color: #333;
    font-size: 1.5rem;
  }
  .match-level {
    padding: .1rem .4rem;
    color: #fff;
    font-size: 1rem;
    border-radius: .25rem;
    background: linear-gradient(180deg, #6a3906 0%, #b28850 100%);
    vertical-align: middle;
  }
  .activity-add {
    margin-top: .3rem;
    img {width: 1.1rem}
  }
  .activity-time,.activity-spend {
    margin-top: .3rem;
    img {width: 1.25rem}
  }
  .type-label {
    position: absolute;
    padding-left: .5rem;
    padding-right: .5rem;
    border-top-left-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    color: #fff;
    font-size: 1.2rem;
    right: 0;
    top: .4rem;
    &.green {background: #2cd28a;}
    &.pink {background: #ea68a2;}
    &.blue {background: #88abda;}
    &.yellow {background: #cfa972;}
  }
  .online-dot {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: #2cd28a;
    right: .5rem;
    top: .5rem;
    border-radius: 100%;
  }
</style>
